<!DOCTYPE html>
<html>
<head>
    <title>Range selection</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div class="demo-section" style="width:470px">
                <label for="start">Start date:</label>
                <input id="start" value="10/10/2011" />

                <label for="end" style="margin-left:3em">End date:</label>
                <input id="end" value="10/10/2012"/>
            </div>
            <script>
                $(document).ready(function() {
                    function startChange() {
                        var startDate = start.value(),
                        endDate = end.value();

                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate());
                            end.min(startDate);
                        } else if (endDate) {
                            start.max(new Date(endDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    function endChange() {
                        var endDate = end.value(),
                        startDate = start.value();

                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate());
                            start.max(endDate);
                        } else if (startDate) {
                            end.min(new Date(startDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    var start = $("#start").kendoDatePicker({
                        change: startChange
                    }).data("kendoDatePicker");

                    var end = $("#end").kendoDatePicker({
                        change: endChange
                    }).data("kendoDatePicker");

                    start.max(end.value());
                    end.min(start.value());
                });
            </script>

            <style scoped>
                #example .k-datepicker {
                    vertical-align: middle;
                }

                #example h3 {
                    clear: both;
                }

                #example .code-sample {
                    width: 60%;
                    float:left;
                    margin-bottom: 20px;
                }

                #example .output {
                    width: 24%;
                    margin-left: 4%;
                    float:left;
                }
            </style>
        </div>

</body>
</html>
